<template>
<div class="goods" @click="goToDetails">
    <img v-lazy="getImg" :key="getImg" alt="">
    <div class="goods-info">
        <p>{{goodsItem.title}}</p>
        <span class="price">¥{{goodsItem.price}}</span>
        <span class="collect">{{goodsItem.cfav}}</span>
    </div>
</div>
</template>

<script>
// 监听图片加载完成
// js:img.onLoad=function()
// vue img标签 @load监听图片加载完成
// vuex 属性，中间通信
// 事件总线 管理事件 1.Vue.prototype.$bus = new Vue() 2.this.$bus.$emit('aaa','参数'), 3.this.$bus.$on('aaa',(参数)=>{})
// 调用scroll的refresh()
// created()一般进行网络请求，组件并未挂在一般拿到组件为null,组件操作事件一般在mouted()中操作
//防抖动操作，等一会在请求操作 防止抖动debounce/节流throttle
/**
 * 防抖函数
 * setTimeout 下一次事件循环执行时候才会执行
 */
// debounce(func,delayed)
// {
//     let timer = null

//     return function(...args){
//         if(timer) clearTimeout(timer)
//         timer = setTimeout(() => {
//             func.apply(this,args)
//         }, delayed);
//     }
// }
export default {
    name: 'GoodsListItem',
    props: {
        goodsItem: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    methods: {
        goToDetails() {
            // 1.获取iid
            let iid = this.goodsItem.iid;

            // 2.跳转到详情页面
            this.$router.push({
                path: '/detail',
                query: {
                    iid
                }
            })
        },
    },
    computed: {
      getImg() {
        return this.goodsItem.img || this.goodsItem.image || this.goodsItem.show.img
      }
    }
}
</script>

<style scoped>
.goods {
    padding-bottom: 40px;
    position: relative;
}

.goods img {
    width: 100%;
    border-radius: 5px;
}

.goods-info {
    font-size: 12px;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    overflow: hidden;
    text-align: center;
}

.goods-info p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
}

.goods-info .price {
    color: var(--color-high-text);
    margin-right: 20px;
}

.goods-info .collect {
    position: relative;
}

.goods-info .collect::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 0;
    width: 14px;
    height: 14px;
    background: url("~assets/img/common/collect.svg") 0 0/14px 14px;
}
</style>
